<template>
    <div class="bg_view">
        <div class="cus_search">
            <div class="cus_search_left" :style="{
                width:
                    searchValue.length > 0
                        ? 'calc(100% - 2.625rem)'
                        : 'calc(100% - 1.125rem)',
            }">
                <img src="@/assets/img/search for@2x.png" alt="" />
                <input type="text" v-model="searchValue" @keyup.enter="SearchActive" placeholder="请输入症状" />
                <!-- <img src="@/assets/img/delete@2x.png" alt="" v-if="searchValue.length > 0" @click="emptyValue" /> -->
            </div>
            <div class="cus_search_right" v-if="searchValue.length > 0" @click="emptyValue">取消</div>
        </div>
        <div class="appo_box" v-if="list.length > 0">
            <div class="appo_box_dep">
                <div class="dep" v-for="(itemL) in list" @click="screenClick(itemL)" :data-id="itemL.id" :style="{
                    'background-color': idx == itemL.id ? '#F1F5F9' : '#fff',
                }">
                    {{ itemL.name }}
                </div>
            </div>
            <div class="appo_box_room">
                <div class="room" v-for="(itemR) in room.childList" @click="goBackResult(itemR)">
                    {{ itemR.name }}
                </div>
            </div>
        </div>
        <div class="noResult" v-else>
            抱歉，没找到匹配的症状
        </div>
        <div class="btn_box">
            <div class="btn_box_1" @click="Back">上一步</div>

        </div>
    </div>
</template>
<script>
import { guideList } from "@/api/api";
export default {
    data() {
        return {
            searchValue: "",
            idx: null,
            list: [],
            room: [],
            smartStep: "",
            messageList: []
        }
    },
    created() {
        this.init()
    },

    methods: {
        init() {
            if (this.$route.query.id) {
                this.guideList()
            }
            if (window.localStorage.getItem("smartStep")) {
                this.smartStep = parseInt(window.localStorage.getItem("smartStep"))
            }
            if (window.localStorage.getItem("messageList")) {
                this.messageList = JSON.parse(window.localStorage.getItem("messageList"))
            }

        },
        guideList() {
            guideList({
                parentId: this.$route.query.id, //0 : 所有一级症状
                selectAll: this.$route.query.isOther //查询全部子集
            }).then(res => {
                if (res.code == 200) {
                    this.list = res.data
                    if(res.data.length>0){
                        this.idx=this.list[0].id
                        this.room=this.list[0]
                    }
                }
            })
        },

        screenClick(item) {
            this.idx = item.id
            this.room = item
        },
        goBackResult(item) {
            this.messageList.push({
                from: "patient",
                type: "TEXT",
                msg: item.name,
            });
            this.messageList.push({
                from: "doctor",
                type: "CARD",
                msg: item.majorList,
            });
            this.smartStep += 1
            window.localStorage.setItem("smartStep", JSON.stringify(this.smartStep))
            window.localStorage.setItem("messageList", JSON.stringify(this.messageList))
            this.$router.go(-1)
        },
        SearchActive() {
            this.room=[]
            if (this.searchValue.length == 0) {
                this.guideList()
            } else {
                var listResultStart = this.list
                var listResultEnd = []
                listResultStart.forEach(event => {
                    if (event.name.indexOf(this.searchValue) != -1) {
                        listResultEnd.push(event)
                    }
                })
                this.list = listResultEnd
            }

        },
        emptyValue() {
            this.searchValue = ""
            this.guideList()
        },
        Back() {
            this.$router.go(-1)

        },
    },
    watch: {
        searchValue(newValue, oldValue) {
            if (newValue.length == 0) {
                this.guideList()
            }
        },
    }
}
</script>
<style scoped>
.bg_view {
    height: 100vh;
    background-color: #F2F5F8;
}

.cus_search {
    width: calc(100% - 2rem);
    height: 2.125rem;
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
    color: #131a2a;
    background-color: #fff;
}

.cus_search_left {
    width: calc(100% - 1.125rem);
    height: 2.125rem;
    padding: 0 0.5625rem;
    display: flex;
    align-items: center;
    background: rgba(247, 250, 253, 1);
    border-radius: 1.125rem;
}

.cus_search_left>img {
    width: 1rem;
    height: 1rem;
}

.cus_search_left>img:nth-of-type(1) {
    margin-right: 0.375rem;
}

.cus_search_left>input {
    width: calc(100% - 3.125rem);
    padding: 0px 0.1875rem;
    height: 100%;
    border: none;
    background: rgba(247, 250, 253, 1);
    outline: none;
}

.cus_search_right {
    width: 2.625rem;
    text-align: right;
}

.appo_box {
    height: calc(100vh - 6.1875rem);
    background-color: #f1f5f9;
    display: flex;
    font-size: 0.9375rem;
}

.appo_box_dep {
    width: 8.4375rem;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
}

.appo_box_dep .dep {
    width: 6.3125rem;
    padding: 0.9375rem 1.0625rem;
    text-align: center;
    font-weight: bold;
    background: rgba(255, 255, 255, 1);
    border-radius: 0px 0.3125rem 0.3125rem 0px;
    margin-bottom: 0.0625rem;
}

.appo_box_room {
    width: calc(100% - 8.4375rem);
    height: 100%;
    overflow-y: scroll;
}

.appo_box_room .room {
    width: calc(100% - 2.125rem);
    padding: 0.9375rem 1.0625rem;
    text-align: center;
    margin-bottom: 0.0625rem;
}

.noResult {
    line-height: 12.5rem;
    text-align: center;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8F97A4
}

.btn_box {
    height: 2.8125rem;
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0px 0px 13px 0px rgba(181, 189, 197, 0.28);
    z-index: 1000;
}

.btn_box>div {
    width: 100%;
    height: 100%;
    line-height: 45px;
    font-size: 18px;
    text-align: center;
    /* font-weight: bold; */
}

.btn_box .btn_box_1 {
    color: #fff;
    background-color: #448eff;

}

.btn_box .btn_box_2 {
    background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
    color: #fff;
}
</style>